import React from 'react';  
import {connect} from 'react-redux';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import * as folderStore from '../core';
import {FolderBarContainer} from "./FolderBar";
import ToolBar from "./ToolBar";
import FolderList from "./FolderList";
import DetailTab from "./DetailTab";
import ActivityTab from "./ActivityTab";
import * as actionCreators from '../action_creators';
import FolderStore from "../stores/FolderStore";   
import OptionStore from "../stores/OptionStore"; 
export const ArchiveList = React.createClass({
    getInitialState: function () {                
        return {
            folderChildren : {},
            curObject : null,
            selectedObject: null,
            toolBarContext: null, 
            colsOption: OptionStore.getColsOption(),        
            mounting: false
        };
    },     
        updateFolderList: function(folderChildren){   
            if (!this.state.mounting) return;            
            this.setState({
                folderChildren:folderChildren               
            });  
        },
        updateFolderBar:function(curObject) {
            if (!this.state.mounting) return;
            this.setState({curObject: curObject});     
        },
        updateDetail: function(selectedObject){
            if (!this.state.mounting) return;
            this.setState({selectedObject: selectedObject});
        },
        updataToolBar: function(toolBarContext) {
            if (!this.state.mounting) return;
            this.setState({toolBarContext: toolBarContext});
        },
        onCurFolderChanged: function(event, folder) {            
            var _this = this;
            this.curFolder = folder;
            if (!folder) return;
            $("#folder-list").loading();            
            FolderStore.getFolderChildren(folder)
                .done(function(folderChildren) {
                    if (folder === _this.curFolder) {
                        FolderStore.setSelectedObject(folder);  
                        _this.updateFolderBar(folder);
                        _this.updateFolderList(folderChildren);   
                        _this.updataToolBar(null);                               
                    }
                })
                .always(function() {
                    if (folder === _this.curFolder) {
                        $("#folder-list").endLoad();
                    }
                });            
        },    
        onCurDocumentChanged: function(event, doc) {
            var _this = this;
            if (doc) {
                _this.updateFolderBar(doc);
                _this.updateDetail(doc);
                _this.updataToolBar(doc);
            } else {
                _this.updateFolderBar(FolderStore.curFolder);
                _this.updateDetail(FolderStore.curFolder);
                _this.updataToolBar(null);
            }
        }, 
        onFolderListChanged: function(event, data) {
            var _this = this;            
            FolderStore.getFolderChildren(_this.curFolder)
                .done(function(folderChildren) {
                    _this.updateFolderList(folderChildren);
                });

            if (data.action == 'FOLDER_LIST_REMOVE') {   
                if(_.contains(data.items, _this.state.selectedObject)){
                    FolderStore.setSelectedObject(_this.state.selectedObject.parent);
                }              
            }
        },
        onSelectedObjectChanged: function(event, data){
            if (!this.state.mounting) return;
            this.updateDetail(data);
            this.updataToolBar(data);     
        },
        onColsOptionChanged: function(){           
            this.setState({colsOption: OptionStore.getColsOption()});
        },
        onPropertiesChanged: function(event, data){
            if (this.state.selectedObject.id == data.id){
                this.updateDetail(data);
            }
        },
        componentDidMount: function(){
            this.state.mounting = true;                  
            var _this = this;          
            FolderStore.curFolderChanged(this.onCurFolderChanged);          
            FolderStore.folderListChanged(this.onFolderListChanged);
            FolderStore.selectedObjectChanged(this.onSelectedObjectChanged);           
            OptionStore.colsOptionChanged(this.onColsOptionChanged);
            FolderStore.propertiesChanged(this.onPropertiesChanged);
            
            if (window.ArchiveStyle) {
                $('.resi-right').css(window.ArchiveStyle.resiRightStyle);
                $('.resi-left').css(window.ArchiveStyle.resiLeftStyle);
                $('.btn_hide_split_view_master_wrap').css(window.ArchiveStyle.hideBtnStyle);
            }     
        },  
        componentWillUnmount:function(){
            //FolderStore.setCurFolder(null);
            FolderStore.curFolderChanged(this.onCurFolderChanged, false);  
            FolderStore.folderListChanged(this.onFolderListChanged, false);
            FolderStore.selectedObjectChanged(this.onSelectedObjectChanged, false);            
            OptionStore.colsOptionChanged(this.onColsOptionChanged, false);
            FolderStore.propertiesChanged(this.onPropertiesChanged, false);
            window.ArchiveStyle = {};
            window.ArchiveStyle.resiRightStyle = {
                'display' : $('.resi-right')[0].style.display,
                'width' :  $('.resi-right').css('width')
            };
            window.ArchiveStyle.resiLeftStyle = {
                'width' : $('.resi-left').css('width')
            };            
            var $hidtBtn = $('.btn_hide_split_view_master_wrap');
            window.ArchiveStyle.hideBtnStyle = {
                'color': $hidtBtn.css('color'),
                'background-color': $hidtBtn.css('background-color'),
                'border-color': $hidtBtn.css('border-color')
            };            
          
            this.state.mounting = false;                                       
        },
        uploadNewVersion : function(){
            var curDoc = FolderStore.getCurDocument();
            window.uploadNewVersion(curDoc);            
        },
        downDocument: function(){
            var curDoc = FolderStore.getCurDocument();
            if (curDoc) {
                CMISService.downloadDocument(curDoc.id);
            } else {                
                UCX_Utils.toast('warning', "please select a document first!");               
            }
        },
        removeDocument: function() {
            var curDoc = FolderStore.getCurDocument();
            window.removeDocument(curDoc);           
        },
        preview: function(){
            var curDoc = FolderStore.getCurDocument();
            if (curDoc) {
                 previewByDocumentId(curDoc.id);
            } else {                
                UCX_Utils.toast('warning', "please select a document first!");               
            }
        },       
        render: function () { 
            var DetailTabItem;
            var FolderBarItem;
            var FolderListItem;
            var ToolBarItem;
            var NameItem;
            console.log(this.props)
            if (!this.props.curFolder){
                return (<div></div>);
            }             
            if (this.state.selectedObject) {
                DetailTabItem=(<DetailTab data={this.state.selectedObject}></DetailTab>) 
                NameItem=(<span style={{fontSize: '18px'}} className="break-word">
                            <i className={classNames({
                                "fa-folder": this.state.selectedObject.type === "cmis:folder",
                                "fa-file-text-o": this.state.selectedObject.type !== "cmis:folder"}, "fa")}></i>
                            <span className="break-word">{this.state.selectedObject.name}</span>
                          </span>)              
            }            
            return (            
                <div>
                    <div className="toolbar_wrap">
                        <div className="ba-col-r">  
                            <FolderBarContainer></FolderBarContainer>                        
                            <ToolBar data={this.state.toolBarContext} colsOption={this.state.colsOption}></ToolBar>
                        </div>   
                    </div>
                    <div className="root_right_wrap wrap">
                    <div className="minmaxwidth resizable resizable1 resi-left ui-resizable">
                        <div id="folder-list" className="split_view_master_wrap" >                           
                               <FolderList data={this.props.curFolder.get("children")} colsOption={this.state.colsOption}></FolderList> 
                        </div>
                    </div>
                    <div className="resizable resizable2 resi-right" style={{display:'inline-block'}}>      
                        <section className="split_view_slave_wrap scroll_auto_y">
                            <section className="panel">
                                <header className="panel-heading" style={{lineHeight: '24px'}}>
                                    {NameItem}
                                    <span className="pull-right hide-i">
                                        <i className="fa fa-times"></i>
                                    </span>
                                </header>
                                <div className="doc-det-act panel-body m-top-15 row">
                                    <header className="panel-head">
                                        <ul className="nav nav-justified ">
                                            <li className="active">
                                                <a href="#details" data-toggle="tab" aria-expanded="true">
                                                   Details
                                                </a>
                                            </li>
                                            <li className="">
                                                <a href="#activity" data-toggle="tab" aria-expanded="false">
                                                    Activity
                                                </a>
                                            </li>
                                        </ul>
                                    </header>
                                    <div className="panel-body">
                                        <div className="tab-content tasi-tab">                                
                                            {DetailTabItem} 
                                            <ActivityTab></ActivityTab>                              
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </section>
                    </div>
                </div>    
            </div>     
            )            
        }
    });   


function mapStateToProps(state) {
    var curFolderId = state.get("curFolderId");
    var curFolder = folderStore.getFolderById(state.get("folderTree"), curFolderId);
    return {
        curFolderId : curFolderId,
        folderTree : state.get("folderTree"),
        curFolder: curFolder
    };
}

export const ArchiveListContainer = connect(
    mapStateToProps,
    actionCreators
)(ArchiveList);